<template >
  
     <scroll-view class="" scroll-y :style="{height: wh + 'px'}">
        <view class="headcolor">  </view>
        <view class="top-head">
           <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.czvv.com%2Flogo%2F552f3bfbe4b032e6a8f947e9%2F1.png&refer=http%3A%2F%2Fstatic.czvv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669041544&t=40444fb96ad7314e50e35039a8c9921f"></image>
        </view>
        <view class="top-attention">
          <view class="top-attention-up">
            <view class="top-attention-left">
              <h1>1</h1>
              <p>注册家政教员</p>
            </view>
            <view class="top-attention-right">
              <h1>1000</h1>
              <p>已认证客户数</p>
            </view>
          </view>
          <view class="top-attention-down">
              <uni-fav  :checked="checkList[0]" :content-text="contentText0" @click="favClick(0)" star="flase" circle="true"/>
          </view>
        </view>
        <view class="business">
          <view class="business-text">
            业务范围
          </view>
          <view class="portrait">
            <view class="portrait-ys">
              <uni-icons   type="contact" size="50"color="rgb(151, 145, 145)"></uni-icons>
              <view class="">
                月嫂
              </view>
            </view>
            <view class="portrait-ys">
              <uni-icons   type="contact" size="50"color="rgb(151, 145, 145)"></uni-icons>
              <view class="">
                女仆
              </view>
            </view>
            <view class="portrait-ys">
              <uni-icons   type="contact" size="50"color="rgb(151, 145, 145)"></uni-icons>
              <view class="">
                育婴师
              </view>
            </view>
          </view>
        </view>
        <view class="company-profile">
         <segmented-control></segmented-control>
          				
          			</view>
           		</view>
           	</view>
          </view>
        </view>
        <view class="buttom-table-big">
          
       
        <view class="buttom-table">
          <view class="table">
            <view class="box">
              <uni-icons type="link" size="30"color="rgb(151, 145, 145)"></uni-icons>
               <view class="fx"> 分享 </view>
            </view>
            <view class="box">
               <uni-icons type="weixin" size="30"color="rgb(151, 145, 145)"></uni-icons>
               <view class="wx"> 微信联系  </view>
            </view>
            <view class="box">
               <uni-icons type="phone-filled" size="30" color="rgb(151, 145, 145)"></uni-icons>
                <view class="dh">  电话联系 </view>
            </view> 
          </view>
          
        </view>
           </view>
        </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        checkList:[false],
        contentText0: {
        	contentDefault: '关注',
        	contentFav: '已关注',
          }
         }
    },
    methods: {
    			favClick(index) {
    				this.checkList[index] = !this.checkList[index]
    				console.log(this.checkList[index]);
    				this.$forceUpdate()
    			},
          
    		}
  }
</script>

<style lang="scss">
.scroll-view-container{
  display: flex;
  background:rgb(232,232,232) ;
  position: absolute;
  // height: 416rpx;
  width: 684rpx;
  }
  .headcolor{
    height: 56rpx;
    width: 100%;
    background:#3F51B5;
  }
  .top-head{
    text-align: center;
	background: rgb(232, 232, 232);
     margin: 0 30rpx 0rpx 30rpx;
     position: relative;
     top:-36rpx;
	 image{
		 height: 400rpx;
		 width: 100%;
	 }
  }
  .top-attention{
    display: flex;
   flex-direction:column;
    height: 292rpx;
      margin: 0 30rpx 0rpx 30rpx;
    background-color: rgb(255, 255, 255);
  }
  .top-attention-up{
    display: flex;
     height: 168rpx;
  }
  .top-attention-right{
   width: 336rpx;
   padding-top:48rpx ;
   text-align: center;
  }
  .top-attention h1{
    color: rgb(72, 77, 180);
    font-size: 24px;
  }
   .top-attention p{
     font-size: 13px;
    font-weight: 500;
   }
  .top-attention-left{
   width: 336rpx;
   padding-top:48rpx ;
   text-align: center;
   border-right:solid 2rpx rgb(232, 232, 232) ;
  }
  .top-attention-down{
    flex: 1;
    margin: 0 auto;
    margin-bottom: 36rpx;
  }
  .business{
   height: 326rpx;
   margin:20rpx 30rpx 0rpx 30rpx;
   background-color: rgb(255, 255, 255);
  }
  .business-text{
    padding-left:54rpx ;
    height: 106rpx;
    line-height: 106rpx;
    border-bottom:solid 1px rgb(232, 232, 232);
  }
  .portrait{
    display: flex;
  }
  .portrait-ys{
    margin: 20rpx 20rpx 20rpx 20rpx;
    text-align: center;
  }
  .company-profile{
      height: 1776rpx;
     background-color: rgb(255, 255, 255);
      margin:20rpx 30rpx 0rpx 30rpx;
  }
 .buttom-table-big{
    margin: 0 auto;
  }
  .buttom-table{
 
    width: 100%;
    height: 134rpx;
    background-color:#fff;
    overflow: hidden;
    margin-top: 22rpx;
  .table{
    margin: 15rpx 48rpx;
    display: flex;
     justify-content: space-around;
     align-items: center;
  .box{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
    }
  }
}

</style>
